{% extends 'base.html.twig' %}

{% block title %}
    GaoAPI
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('swagger-ui/dist/swagger-ui.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/frontend/default/document.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/frontend/default/iconfont.css') }}">
    <script type="text/javascript" src="{{ asset('js/frontend/default/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/frontend/default/scrollfix.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/frontend/default/document.js') }}"></script>
{% endblock %}

{% block body %}

    <div id="swagger-ui">
        <section data-reactroot="" class="swagger-ui swagger-container">
            <div class="topbar">
                <div class="wrapper">
                    <div class="topbar-wrapper">
                        <a href="/" style="flex:none;"><img height="40" src="{{ asset('images/gaoapi-logo.svg') }}" alt="GaoAPI" style="margin-right: 10px;">GaoAPI</a>
                        <a rel="noopener noreferrer" class="link">
                            <img height="40" src="{{ asset('images/symfony-logo.svg') }}" alt="Symfony" style="margin: 0 30px">
                            <img height="40"
                                 src=""
                                 alt="Swagger UI">
                        </a>
                    </div>
                </div>
            </div>
            <div class="swagger-ui">
                <div class="information-container wrapper">
                    <section class="block col-12">
                        <div>
                            <div class="info">
                                <hgroup class="main">
                                    <h2 class="title">
                                        <span class="title" style="font-size: 36px;">
                                            {{ info.title }}
                                        </span>
                                        <span>
                                            <small><pre class="version">{{ info.version }}</pre></small>
                                            <small style="background-color: rgb(137, 191, 4);"><pre
                                                        class="version">OAS3</pre></small>
                                        </span>
                                    </h2>
                                    <a target="_blank" href="{{ path('swagger_tag_page', {tag: info.tag}) }}"
                                       rel="noopener noreferrer" class="link">
                                        <span class="url">跳转至 ☞ swagger</span>
                                    </a>
                                </hgroup>
                                <div class="description">
                                    <div class="renderedMarkdown"><p>{{ info.description }}</p></div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="scheme-container">
                    <section class="schemes wrapper block col-12">
                        <div>Document 这是由系统自动生成的API接口文档</div>
                    </section>
                </div>
            </div>
        </section>
        <section class="document-content">
            <div class="nav">
                <ul>
                    {% if tags|length > 0 %}
                        {% for tag in tags %}
                            <li class="nav-item">
                                <a href="javascript:;">
                                    <i class="iconfont my-icon nav-icon icon-wenjianjia"></i>
                                    <span>{{ tag.name }} <font style="font-size: 12px;color: #888;">{{ tag.description }}</font></span>
                                    <i class="my-icon nav-more"></i>
                                </a>
                                <ul class="sub-item">
                                    {% if tag.child|length > 0 %}
                                        {% for item in tag.child %}
                                            <li>
                                                <a href="javascript:void(0);" onclick="getDoc('{{ item.operationId }}')">
                                                    <i class="iconfont my-icon nav-icon icon-wenjian3"></i>
                                                    <span>{{ item.summary }}</span>
                                                </a>
                                            </li>
                                        {% endfor %}
                                    {% endif %}
                                </ul>
                            </li>
                        {% endfor %}
                    {% else %}
                        <li class="nav-item">
                            <a href="javascript:;">
                                <i class="iconfont my-icon nav-icon icon-wenjianjia"></i>
                                <span>暂无接口</span>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </div>
            <div id="document">
                <div class="doc-title">说明</div>
                <div class="doc-summary">点击左侧接口条目查看详细信息。</div>
                <div class="doc-body">
                    <div class="doc-item">
                        <span class="label">请求路径：</span>
                        <span class="sub-span url">暂无</span>
                    </div>
                    <div class="doc-item">
                        <span class="label">请求方式：</span>
                        <span class="sub-span method">暂无</span>
                    </div>
                    <div class="doc-item">
                        <span class="label">摘要：</span>
                        <span class="sub-span summary">暂无</span>
                    </div>
                    <div class="doc-item">
                        <span class="label">描述：</span>
                        <span class="sub-span description">暂无</span>
                    </div>
                    <div class="doc-item">
                        <span class="label">参数：</span>
                        <div class="doc-parameter">
                            <table class="parameter-table">
                                <thead>
                                <tr class="p-tr">
                                    <th width="10%" class="p-th">类型</th>
                                    <th width="15%" class="p-th">参数名</th>
                                    <th width="10%" class="p-th">必选</th>
                                    <th width="15%" class="p-th">格式</th>
                                    <th width="50%" class="p-th">说明</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="doc-item">
                        <span class="label">返回示例：</span>
                        <div class="pretty-content">
                            <span class="sub-span">暂无</span>
                        </div>
                    </div>
                    <div class="doc-item">
                        <span class="label">备注：</span>
                        <div class="remark-content">
                            <span class="sub-span">暂无</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        function getDoc(operationId) {
            $.ajax({
                type: "POST",
                url: "{{ path('document_content') }}",
                dataType: 'json',
                data: {"info_id": {{ info.id }},"operation_id": operationId},
                success: function (result) {
                    if (result.success) {
                        $('.doc-body').show();
                        $('.doc-summary').hide();
                        $('.doc-title').html(result.data.summary);
                        $('.doc-item .url').html('<code>' + result.data.url + '</code>');
                        $('.doc-item .method').html(result.data.method);
                        $('.doc-item .summary').html(result.data.summary);
                        if (result.data.description != '') {
                            $('.doc-item .description').html(result.data.description);
                        } else {
                            $('.doc-item .description').html('暂无');
                        }
                        $('.parameter-table tbody').html('');
                        $.each(result.data.parameters, function (index, item) {
                            $('.parameter-table tbody').append('<tr><td>' + item.in + '</td><td>' + item.name + '</td><td>' + item.required + '</td><td>' + item.schema.type + '</td><td>' + item.description + '</td></tr>')
                        })
                        if (result.data.successCode != '') {
                            $('.pretty-content').html('<pre class="prettyprint">' + result.data.successCode + '</pre>');
                        } else {
                            $('.pretty-content').html('<span class="sub-span">暂无</span>');
                        }
                        if (result.data.remark != '') {
                            $('.remark-content').html('<pre class="prettyprint">' + result.data.remark + '</pre>');
                        } else {
                            $('.remark-content').html('<span class="sub-span">暂无</span>');
                        }
                    } else {

                    }
                }
            });
        }
    </script>
{% endblock %}